<template>
	<!-- //健康分析 -->
	<view class="health-report">
		<!-- 主要表现 -->
		<view class="main-perfromance">
			<view class="main-perfromance-title">
				<text class="main-perfromance-title1">主要表现</text>
				<text class="main-perfromance-text">可能出现或者即将出现以下一个或者几个症状，不排除出现其他特殊情况</text>
			</view>
			<!-- 症状 -->
			<view class="main-perfromance-symptom">
				<view class="symptoms" v-for="item in riskInfo.treatPlans[0].main_performance">{{item.message}}</view>
			</view>
		</view>
		<!-- 风险提示 -->
		<view class="risk-warning">
			<view class="risk-content">
				<view class="risk-warning-title">
					<text>风险提示</text>
				</view>
				<br />
				<view class="risk-warning-titles1">
					<text class="titles1">1.健康风险</text>
					<!-- 这里渲染 -->
					<view class="riskList">
						<span class="risks" v-for="item in clear(riskInfo.treatPlans[0].high_risk_disease[0].message)">
							<text class="risks-list">{{item}}</text>
						</span>
					</view>
				</view>
				<view class="risk-warning-titles2">
					<text class="titles2">2.节气风险</text>
					<!-- 三个建议框 -->
					<view class="risks2">
						<view class="weather">
							<view class="weather-text">{{riskInfo.illProbability.illProbabilities[0].name}}</view>
							<view class="weather-today">当前节气</view>
						</view>
						<view class="weather">
							<view class="weather-text">{{riskInfo.illProbability.illProbabilities[0].probability}}%
							</view>
							<view class="weather-today">患病概率</view>
						</view>
						<view class="weather">
							<view class="weather-text">{{riskInfo.illProbability.illProbabilities[0].level}}</view>
							<view class="weather-today">患病风险</view>
						</view>
					</view>
					<!-- 提示 说明 -->
					<view class="risk2-attention1">
						提示：{{riskInfo.illProbability.illProbabilities[0].tip}}
					</view>
					<view class="risk2-attention2">
						说明：{{riskInfo.illProbability.explanation}}
					</view>
				</view>
			</view>
		</view>
		<!-- 发生原因 -->
		<view class="cause">
			<view class="cause-title">
				<text>发生原因</text>
			</view>
			<view class="casue-content">
				<view class="casue-content-text" v-for="item in riskInfo.treatPlans[0].occur_reason">
					<text>{{item.message}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as TongueApi from '@/api/tongue/tongue.js'
	export default {
		onLoad(options) {
			//获取OUTID
			console.log(options.params)
			const paramsStr = options.params;
			const receivedParams = JSON.parse(paramsStr); // 将参数字符串解析为对象
			this.reportid = receivedParams.reportid
			console.log(this.reportid)
			this.healthInfo()
		},
		data() {
			return {
				reportid: null,
				riskInfo: {},
			}
		},
		methods: {
			async healthInfo() {
				const res = await TongueApi.getszReport(this.reportid)
				// console.log(res.data.data.tongueResultVo)
				this.riskInfo = res.data.data.tongueResultVo
				console.log(this.riskInfo.treatPlans[0].occur_reason)
			},

			//清除符号
			clear(e) {
				if (e === null) {
					return;
				} else {
					console.log(e)
					const array = e.split(',');
					return array;
				}
			},
		}
	}
</script>

<style lang="scss">
	.health-report {
		padding-bottom: 10rpx;
		height: 100vh;
		width: 100vw;
		padding: 0;
		margin: 0;
		overflow-y: scroll;

		// <!-- 主要表现
		.main-perfromance {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 0;
			position: relative;

			.main-perfromance-title1 {
				position: absolute;
				left: 28rpx;
				top: 20rpx;
				height: 54rpx;
				font-size: 45rpx;
				font-weight: 1000;
				letter-spacing: 0rpx;
				line-height: 52.12rpx;
				color: rgba(0, 0, 0, 1);
				text-align: left;
				vertical-align: top;
			}

			.main-perfromance-text {
				position: absolute;
				left: 28rpx;
				top: 74rpx;
				height: 70rpx;
				/** 文本1 */
				font-size: 35rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 34.76rpx;
				color: rgba(0, 0, 0, 1);
				text-align: justify;
				vertical-align: top;
			}

			// 症状
			.main-perfromance-symptom {
				margin-top: 150rpx;
				width: 95%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;

				.symptoms {
					margin-top: 20rpx;
					margin-buttom: 20rpx;
					border-radius: 14rpx;
					/** 文本1 */
					background: rgba(13, 209, 203, 1);
					font-size: 35rpx;
					padding: 0 20rpx;
					font-weight: 400;
					padding: 10rpx;
					color: rgba(255, 255, 255, 1);
					text-align: left;
					vertical-align: top;
				}
			}
		}

		// <!-- 风险提示 -->
		.risk-warning {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 50rpx;

			.risk-content {
				.risk-warning-title {
					margin-left: 20rpx;
					height: 54rpx;
					/** 文本1 */
					font-size: 45rpx;
					font-weight: 1000;
					letter-spacing: 0rpx;
					line-height: 52.12rpx;
					color: rgba(0, 0, 0, 1);
					text-align: left;
					vertical-align: top;
				}

				.risk-warning-titles1 {
					margin: 20rpx 20rpx;
					padding: 20rpx;
					border-radius: 14rpx;
					background: rgba(255, 255, 255, 1);

					.titles1 {
						height: 48rpx;
						/** 文本1 */
						font-size: 35rpx;
						font-weight: 600;
						letter-spacing: 0rpx;
						line-height: 46.34rpx;
						color: rgba(0, 0, 0, 1);
						text-align: left;
						vertical-align: top;
					}

					.riskList {
						display: flex;
						flex-wrap: wrap;
						padding: 10rpx;

						.risks {
							// width: 200rpx;
							margin: 10rpx 25rpx;
							border-radius: 8rpx;
							background: rgba(243, 243, 245, 1);

							.risks-list {
								padding: 10rpx 15rpx 10rpx 15rpx;
								font-size: 35rpx;
							}
						}
					}
				}

				.risk-warning-titles2 {
					margin: 20rpx 20rpx;
					border-radius: 14rpx;
					background: rgba(255, 255, 255, 1);
					padding: 20rpx;

					.titles2 {
						height: 48rpx;
						/** 文本1 */
						font-size: 35rpx;
						font-weight: 600;
						letter-spacing: 0rpx;
						line-height: 46.34rpx;
						color: rgba(0, 0, 0, 1);
						text-align: left;
						vertical-align: top;
					}

					.risks2 {
						margin-top: 30rpx;
						margin-bottom: 30rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						.weather {
							padding: 10rpx 15rpx;
							height: 94rpx;
							border-radius: 14rpx;
							background: rgba(13, 209, 203, 1);
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							.weather-text {
								font-size: 32rpx;
								font-weight: 500;
								color: rgba(255, 255, 255, 1);
							}

							.weather-today {
								font-size: 30rpx;
								font-weight: 400;
								color: rgba(243, 243, 245, 1);
							}
						}
					}

					// 					<!-- 提示 说明 -->
					.risk2-attention1 {
						margin-left: 20rpx;
						border-radius: 14rpx;
						background: rgba(255, 255, 255, 1);
						font-size: 35rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 34.76rpx;
						color: rgba(0, 0, 0, 1);
						text-align: left;
						vertical-align: top;
					}

					.risk2-attention2 {
						margin-left: 20rpx;
						margin-top: 20rpx;
						/** 文本1 */
						font-size: 35rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 34.76rpx;
						color: rgba(0, 0, 0, 1);
						text-align: left;
						vertical-align: top;

					}
				}
			}
		}


		// <!-- 发生原因 -->
		.cause {
			margin-top: 10rpx;

			.cause-title {
				margin-left: 20rpx;
				height: 54rpx;
				/** 文本1 */
				font-size: 45rpx;
				font-weight: 1000;
				letter-spacing: 0rpx;
				line-height: 52.12rpx;
				color: rgba(0, 0, 0, 1);
				text-align: left;
				vertical-align: top;
			}

			.casue-content {
				margin: 20rpx 20rpx;
				opacity: 1;
				border-radius: 14rpx;
				background: rgba(255, 255, 255, 1);

				// position: relative;
				.casue-content-text {

					font-size: 35rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(0, 0, 0, 1);
					text-align: justify;
					vertical-align: top;
					padding: 10rpx 15rpx;

				}
			}
		}

	}

	.health-report::-webkit-scrollbar {
		display: none;

	}
</style>